<template>
  <div>
    <el-row>
      <span class="classify-span">分类：</span>
      <el-select
        v-model="value"
        clearable
        placeholder="请选择"
        style="width:220px;diplay:inline-block"
      >
        <el-option
          v-for="item in options"
          :key="item.classifyId"
          :label="item.classifyName"
          :value="item.classifyId"
        ></el-option>
      </el-select>
      <span class="classify-span">名称：</span>
      <el-input v-model="input" placeholder="请输入关键字" style="width:220px;diplay:inline-block"></el-input>
      <el-button type="primary" icon="el-icon-search" @click="queryGoods(1)">查询</el-button>
      <el-button
        type="primary"
        @click="addGoods"
        icon="el-icon-plus"
        style="float:right;margin-right:20px"
      >添加商品</el-button>
    </el-row>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="60" align="center">
        <template slot-scope="props">
          <span>{{(currentPage - 1) * 10 + props.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="itemName" label="商品名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="itemTag" label="商品热度" align="center"></el-table-column>
      <el-table-column prop="price" label="价格（元）" align="right"></el-table-column>
      <el-table-column prop="discount" label="商品折扣" align="center"></el-table-column>
      <el-table-column prop="brand" label="所属品牌" align="center" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="stock" label="商品库存" align="center"></el-table-column>
      <el-table-column prop="classify" label="所属分类" align="center"></el-table-column>
      <el-table-column label="商品详情" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="bottom">
            <p>{{ scope.row.itemDetail }}</p>
            <!-- <p>住址: {{ scope.row.address }}</p> -->
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">查看详情</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="eGoods(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="deleteGoods(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 :page-sizes="[10, 20, 50, 100]"-->
    <div class="block">
      <el-pagination
        background
        style="margin:15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="10"
        :total="totalCount"
      ></el-pagination>
    </div>
    <!-- <el-pagination style="margin:15px 0" background layout="prev, pager, next" :total="1000"></el-pagination> -->
    <!-- 弹出层 -->
    <el-dialog title="添加商品" :visible.sync="dialogFormVisible" center top="2vh" lock-scroll>
      <el-form :model="form" ref="form">
        <el-form-item label="商品名称：" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" prop="name" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="商品价格：" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off" style="width:300px"></el-input>
          <div style="display:inline-block">
            元
            <span style="color:#F14141">（注：填写商品价格，可以到小数点后两位）</span>
          </div>
        </el-form-item>
        <el-form-item label="商品折扣：" :label-width="formLabelWidth">
          <el-select v-model="form.discount" placeholder="点击选择" style="width:300px">
            <el-option label="无折扣" value="1"></el-option>
            <el-option label="9折" value="0.9"></el-option>
            <el-option label="8.5折" value="0.85"></el-option>
            <el-option label="5折" value="0.5"></el-option>
            <el-option label="3折" value="0.3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品销量：" :label-width="formLabelWidth">
          <el-input v-model="form.sales" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="所属品牌：" :label-width="formLabelWidth">
          <el-input v-model="form.brand" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="商品库存：" :label-width="formLabelWidth">
          <el-input v-model="form.stock" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="商品分类：" :label-width="formLabelWidth">
          <el-select v-model="form.classify" placeholder="点击选择" style="width:300px">
            <el-option
              v-for="item in options"
              :key="item.classifyId"
              :label="item.classifyName"
              :value="item.classifyId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品详情：" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="form.itemDetail" style="height:120px"></el-input>
        </el-form-item>
        <el-form-item label="图片地址：" :label-width="formLabelWidth">
          <el-input v-model="form.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品标签：" :label-width="formLabelWidth">
          <el-select v-model="form.itemTag" placeholder="点击选择" style="width:300px">
            <el-option label="热销" value="热销"></el-option>
            <el-option label="新品上市" value="新品上市"></el-option>
            <el-option label="特价打折" value="特价打折"></el-option>
            <el-option label="无" value="无"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="closeDiv">取 消</el-button>
        <el-button type="primary" @click="submitGoods(booType)">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 删除商品提示 -->
  </div>
</template>
<script>
import { httpRequest, alertMessage } from "@/utils/api";
export default {
  name: "classify",
  data() {
    return {
      input: "",
      value: "",
      options: [],
      tableData: [],
      dialogFormVisible: false,
      booType: false,
      formLabelWidth: "120px",
      currentPage: 1,
      totalCount: 0,
      form: {
        name: "",
        price: null,
        discount: null,
        sales: null,
        brand: null,
        classify: "",
        itemDetail: "",
        url: "",
        itemTag: ""
      }
      // {
      //   brand: "统一",
      //   classify: "1",
      //   createtime: "2020-01-11",
      //   createuser: "admin",
      //   discount: "1",
      //   isAdd: "0",
      //   isDelete: 0,
      //   itemDetail: "老坛酸菜",
      //   itemId: 8,
      //   itemName: "老坛酸菜面",
      //   itemTag: "热销",
      //   modifytime: "2020-01-15 17:52:50",
      //   modifyuser: "admin",
      //   price: "4.2",
      //   sales: "0",
      //   stock: "2000",
      //   url: "http://data.youxiu.info/mini-images/kang.png"
      // }
    };
  },
  mounted: function() {
    // 查询分类 加载下拉选项
    httpRequest("post", "/item/classify003", "").then(res => {
      if (res.status == 200) {
        this.options = res.data.data;
        this.options.unshift({
          classifyId: "99",
          classifyName: "全部"
        });
      } else {
        alertMessage(this, "网络错误，请稍后重试", "4");
        return false;
      }
      this.queryGoods(1);
    });
  },
  methods: {
    // 添加商品
    addGoods: function() {
      this.dialogFormVisible = true;
      this.booType = false;
      this.form = {
        name: null,
        price: null,
        discount: null,
        sales: null,
        brand: null,
          stock:null,
        classify: null,
        itemDetail: null,
        url: null,
        itemId:null,
        itemTag: null
      };
    },
    // 修改商品
    eGoods: function(index, data) {
      console.log(index);
      console.log(data);
      console.log("---------------------------");
      this.dialogFormVisible = true;
      this.booType = true;
      this.form = {
        name: data.itemName,
        price: data.price,
        discount: data.discount,
        sales: data.sales,
        brand: data.brand,
          stock:this.form.stock,
        classify: data.classify,
        itemDetail: data.itemDetail,
        url: data.url,
        itemId:data.itemId,
        itemTag: data.itemTag
      };
    },
    deleteGoods: function(index, data) {
      // 删除商品
      var _this = this;
      console.log(index);
      console.log(data);
      console.log("---------------------------");
      this.$confirm(`您确认删除“${data.itemName}”这件商品吗？`)
        .then(_ => {
          httpRequest("post", "/item/list008", {
            itemId: data.itemId,
            isDelete: 1
          }).then(res => {
            if (res.status == 200) {
              alertMessage(this, "删除成功！", "1");
              _this.queryGoods(1);
            } else {
              alertMessage(this, "删除失败，请重试！", "4");
            }
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    closeDiv: function() {
      this.dialogFormVisible = false;
      this.$refs.form.resetFields();
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      // this.queryGoods(val)
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.queryGoods(val);
    },
    queryGoods: function(num) {
      // 查询所有商品
      httpRequest("post", "/item/list009", { page: num }).then(res => {
        this.tableData = res.data.data;
        this.totalCount = res.data.totalSize;
        this.currentPage = num;
      });
    },
    submitGoods: function(type) {
      let goods, _url, _msg;
      if (type) {
        // 修改商品
        _url = "/item/list005";
        _msg = "修改成功"
        goods = {
          itemName:this.form.name,
          price:this.form.price,
          discount:this.form.discount,
          sales:this.form.sales,
          brand:this.form.brand,
          stock:this.form.stock,
          classify:this.form.classify,
          itemDetail:this.form.itemDetail,
          url:this.form.url,
          itemId:this.form.itemId,
          itemTag:this.form.itemTag
        }
      } else {
        _url = "/item/list001";
        _msg = "添加成功"
        // 添加商品
        goods = {
          itemName: this.form.name, //商品名称
          price: this.form.price, //商品价格
          discount: this.form.discount, //商品折扣
          sales: this.form.sales, //商品销量
          brand: this.form.brand, //商品品牌
          stock: this.form.stock, //商品库存
          classify: this.form.classify, //商品分类
          itemDetail: this.form.itemDetail, //商品详情
          isDelete: "0", //是否删除
          url: this.form.url, //商品图片
          itemTag: this.form.itemTag //商品标签
        };
      }
      // let goods = {
      //   itemName: "康师傅冰红茶", //商品名称
      //   price: "45.90", //商品价格
      //   discount: "0.9", //商品折扣
      //   sales: "13", //商品销量
      //   brand: "康师傅", //商品品牌
      //   stock: "1000", //商品库存
      //   classify: 2, //商品分类
      //   itemDetail:
      //     "康师傅 冰红茶 柠檬红茶饮料 1L*12瓶 整箱装（新老包装随机发货）", //商品详情
      //   isDelete: "0", //是否删除
      //   url: "http://data.youxiu.info/mini-images/goods23.jpg", //商品图片
      //   itemTag: "热销" //商品标签
      // };
      httpRequest("post", _url, goods).then(res => {
        if (res.status == 200) {
          this.dialogFormVisible = false;
          this.destroyClose = true;
          alertMessage(this, _msg, "1");
        } else {
          alertMessage(this, "添加失败，请重试！", "4");
        }
      });
    }
  }
};
</script>

<style scoped>
.el-row {
  text-align: left;
  margin-bottom: 15px;
}
.classify-span {
  margin: 0 15px;
}
</style>